<template>
  <view class="user-item" @click.stop="handleJumpUserPage">

    <!-- 用户头像 -->
    <image class="avatar" fit="contain" :src="userAvatar">
    </image>

    <!--中间区域 -->
    <view class="center-container">
      <!-- 名称 -->
      <view class="name-contianer">
        <!-- 用户名称 -->
        <text class="name">{{userObj.userName}}</text>
        <!-- 用户性别 -->
        <image src="/static/images/nosex.svg" v-if="userObj.sex==2"></image>
        <image src="/static/images/woman.svg" v-else-if="userObj.sex==1"></image>
        <image src="/static/images/man.svg" v-else-if="userObj.sex==0"></image>
      </view>

      <!-- 类型为0的时候显示个人签名 -->
      <block v-if="userType === 0">
        <text class="signature-text">{{userObj.signature}}</text>
      </block>

      <!-- 类型为1的时候显示阅读量和粉丝数 -->
      <block v-else-if="userType === 1">
        <view class="num-container">
          <text>阅读量: {{userObj.readNum | filterNumber}}</text>
          <text>粉丝数: {{userObj.fansNum | filterNumber}}</text>
        </view>
      </block>

      <!-- 类型为2的时候展示ID和活跃用户 -->
      <block v-else-if="userType === 2">
        <text class="fans-num">粉丝数：{{userObj.fansNum | filterNumber}}</text>
        <view class="user-tag" v-if="userTag">{{userTag}}</view>
      </block>

      <!-- 类型为3的时候显示粉丝数和个性签名 -->
      <block v-else-if="userType === 3">
        <text class="fans-num">粉丝数：{{userObj.fansNum | filterNumber}}</text>
        <text class="signature-text">{{userObj.signature}}</text>
      </block>
    </view>

    <!-- 右侧区域 -->
    <view class="right-container" v-if="userObj.userId!=userId">
      <!-- 关注取关 -->
      <view v-if="userObj.fansState && userObj.followState" class=" attention-true"
        @click.stop="handleAttention(userObj)">
        <text>互相关注</text>
      </view>
      <view v-else-if="userObj.fansState && !userObj.followState" class="attention-true"
        @click.stop="handleAttention(userObj)">
        <text>已关注</text>
      </view>
      <view v-else class="attention-false" @click.stop="handleAttention(userObj)">
        <text>关注</text>
      </view>
    </view>
    <!-- 右侧区域 为空时状态 占位 -->
    <view class="right-container-empty" v-else>
    </view>
  </view>
</template>

<script>
  import {
    postattentionApi
  } from "@/api/components/userItem.js"
  export default {
    props: {
      userObj: { //用户对象
        type: Object,
        default: () => {
          return {}
        }
      },
      // 用户展示模式 0-[个性签名] 1-[阅读量,粉丝数] 2-[粉丝数,个性签名]
      userType: {
        type: Number,
        default: 0
      },
      jump: {
        type: Boolean,
        default: true
      },
      not2User: {
        type: Boolean,
        default: false
      }
    },
    name: "user-item",
    methods: {
      // 关注取关
      async handleAttention(item) {
        let fansState = item.fansState;
        // 取消关注
        if (!fansState === false) {
          uni.showModal({
            title: '是否取关该用户？',
            success: async (res) => {
              if (res.confirm) {
                this.handleAttentionApi(item);
              }
            }
          })
        } else {
          this.handleAttentionApi(item);
        }
      },
      // 用户关注
      async handleAttentionApi(item) {
        let id = item.userId;
        let fansState = item.fansState;
        let {
          data: res
        } = await postattentionApi(id);
        if (res.success) {
          this.$emit("status-change", {
            id,
            fansState
          })
        }
      },
      // 跳转到用户个人界面
      handleJumpUserPage() {
        if (this.jump) {
          uni.navigateTo({
            url: `/pages/my/userInfo/userInfo?id=${this.userObj.userId}`
          })
        }

      }
    },
    computed: {
      // 当前用户id
      userId() {
        return getApp().globalData.getUser().userId
      },
      // 用户标签
      userTag() {
        return this.userObj.badge ? '优质博主' : '萌新小白'
      },
      // 用户头像
      userAvatar() {
        return this.userObj.avatar ? this.userObj.avatar : '/static/images/userHeaderDefault.jpg'
      },
    }
  }
</script>

<style lang="scss" scoped>
  .user-item {
    width: 100%;
    height: 128rpx;
    justify-content: space-around;
    display: flex;
    align-items: center;

    .avatar {
      width: 128rpx;
      height: 128rpx;
      border-radius: 100%;
    }

    .center-container {
      width: calc(100% - 128rpx - 144rpx);
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding: 0 24rpx;
      box-sizing: border-box;

      .name-contianer {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: flex-start;

        .name {
          font-size: 32rpx;
          max-width: 80%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: 20rpx;
        }

        image {
          width: 30rpx;
          height: 30rpx;
        }
      }

      .signature-text {
        font-size: 24rpx;
        color: #666666;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .num-container {
        display: flex;
        justify-content: flex-start;
        font-size: 24rpx;
        color: #666666;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        >text:nth-child(2) {
          margin-left: 16rpx;
        }
      }

      .fans-num {
        color: #666666;
        font-size: 26rpx;
      }

      .user-tag {
        height: 28rpx;
        width: 38%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #EB4C39;
        font-size: 22rpx;
        color: #EB4C39;
      }
    }

    // 关注取关
    .right-container {
      width: 144rpx;

      >view {
        display: flex;
        height: 60rpx;
        border-radius: 60rpx;
        font-size: 26rpx;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
      }

      .attention-true {
        color: #666;
        border: 2rpx solid #666;
      }

      .attention-false {
        color: #ffffff;
        background: #3FD3D1;
      }
    }

    .right-container-empty {
      width: 144rpx;
    }
  }
</style>